<template>
	<view class="wrap">
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="slot-wrap tabs-wrap">
				<u-row justify="around">
					<u-col span="3"></u-col>
					<u-col span="6">
						<u-tabs :font-size="24" :list="topTablist" :is-scroll="false" :show-bar="false"
							:current="currentTab" :offset="[10, 80]" :active-item-style="topbarActcss"
							active-color="#333333" inactive-color="#999999" @change="changeTab">
						</u-tabs>
					</u-col>
					<u-col span="3"></u-col>
				</u-row>
			</view>
		</u-navbar>

		<!-- child cate -->
		<view style="padding: 10rpx 10rpx 0;">
			<u-row>
				<u-col span="11">
					<u-tabs gutter="20" bg-color="transparent" active-color="#333333" inactive-color="#999999"
						:list="cateList" font-size="26" :show-bar="false" :current="curCate" @change="changeCate">
					</u-tabs>
				</u-col>
				<u-col span="1" style="margin-top: -5px;" @tap="showFMask(1)">
					<u-icon name="arrow-down"></u-icon>
				</u-col>
			</u-row>
		</view>
		<u-mask :show="showMask" @click="showFMask(0)" :style="maskTop">
			<view style="background-color: #ffffff;">
				<u-row style="padding: 30rpx 20rpx 0 ;">
					<u-col span="6" text-align="left">
						<text class="u-font-13 main-color" style="letter-spacing: 1rpx;">所有频道</text>
					</u-col>
					<u-col span="6" text-align="right">
						<u-icon name="arrow-up" class="main-color"></u-icon>
					</u-col>
				</u-row>
				<u-grid :col="4" :border="false" style="padding: 0 10rpx 40rpx 2rpx;">
					<template v-for="(item, index) in cateList">
						<u-grid-item :custom-style="{padding: '30rpx 0px 0'}">
							<u-row style="width: 100%;" @tap="changeCate(index, item)">
								<u-col span="1"></u-col>
								<u-col span="10" text-align="center"
									style="border-radius: 4px;border:solid 1px #f3f4f6;padding: 10rpx 0;">
									<text class="u-font-12">{{item.name}}</text>
								</u-col>
								<u-col span="1"></u-col>
							</u-row>
						</u-grid-item>
					</template>
				</u-grid>
			</view>
		</u-mask>

		<!-- flow List -->
		<u-waterfall v-model="flowList" ref="uWaterfall" :isUp="isUpFlow">
			<template v-slot:left="{leftList}">
				<view class="demo-warter-left" v-for="(item, index) in leftList" :key="index" @tap="toDetail(item)">
					<!-- threshold="-450" -->
					<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"
						:loading-img="loadingImg" :error-img="loadErrorImg"></u-lazy-load>
					<view class="demo-title u-font-12">
						{{item.title}}
					</view>
					<view class="demo-shop">
						<u-row>
							<u-col span="8" text-align="left" style="padding: 0px 5px 0 0;">
								<u-row align="center">
									<u-col span="3">
										<u-avatar :size="30" :src="item.image"></u-avatar>
									</u-col>
									<u-col span="9" style="padding: 0 10rpx 8rpx 0;">
										<text class="u-line-1">
											{{item.author.length>4?item.author.substr(0,4)+"...":item.author}}
										</text>
									</u-col>
								</u-row>
							</u-col>
							<u-col span="4" text-align="right">
								<u-icon name="heart" :label="item.like==0?'赞':(item.like>999?'999+':item.like)"
									size="30" color="#999999" label-size="24"></u-icon>
							</u-col>
						</u-row>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter-right" v-for="(item, index) in rightList" :key="index" @tap="toDetail(item)">
					<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"
						:loading-img="loadingImg" :error-img="loadErrorImg"></u-lazy-load>
					<view class="demo-title u-font-12">
						{{item.title}}
					</view>
					<view class="demo-shop">
						<u-row>
							<u-col span="8" text-align="left" style="padding: 0px 5px 0 0;">
								<u-row align="center">
									<u-col span="3">
										<u-avatar :size="30" :src="item.image"></u-avatar>
									</u-col>
									<u-col span="9" style="padding: 0 10rpx 8rpx 0;">
										<text class="u-line-1">
											{{item.author.length>4?item.author.substr(0,4)+"...":item.author}}
										</text>
									</u-col>
								</u-row>
							</u-col>
							<u-col span="4" text-align="right">
								<!-- name="heart-fill" -->
								<u-icon name="heart" :label="item.like==0?'赞':(item.like>999?'999+':item.like)"
									size="30" color="#999999" label-size="24"></u-icon>
							</u-col>
						</u-row>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="#fcfcfc" margin-top="40" :loadText="loadText" :status="loadStatus"
			@loadmore="addRandomData(false)">
		</u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMask: false,
				maskTop: {
					"top": "92rpx"
				},
				currentTab: 1,
				topTablist: [{
					name: '关注'
				}, {
					name: '发现'
				}, {
					name: '我的'
				}],
				topbarActcss: {
					"font-size": "30rpx"
				},
				loadingImg: "/static/Lives/loding.gif",
				loadErrorImg: "/static/Lives/empty.png",
				curCate: 0,
				curCateVal: "",
				cateList: [{
					id: "recommend",
					val: "recommend",
					name: '推荐'
				}, {
					id: "sport",
					val: "sport",
					name: '健身运动'
				}, {
					id: "emotion",
					val: "emotion",
					name: '情感'
				}, {
					id: "renovation",
					val: "renovation",
					name: '家居装修'
				}, {
					id: "Vlog",
					val: "Vlog",
					name: 'Vlog'
				}, {
					id: "study",
					val: "study",
					name: '学习'
				}, {
					id: "auto",
					val: "auto",
					name: '汽车'
				}, {
					id: "camera",
					val: "camera",
					name: '摄影'
				}, {
					id: "music",
					val: "music",
					name: '音乐'
				}, {
					id: "food",
					val: "food",
					name: '美食'
				}, {
					id: "work",
					val: "work",
					name: '职场'
				}, {
					id: "game",
					val: "game",
					name: '游戏'
				}, {
					id: "kjsm",
					val: "kjsm",
					name: '科技数码'
				}, {
					id: "cd",
					val: "cd",
					name: '穿搭'
				}, {
					id: "start",
					val: "start",
					name: '明星'
				}, {
					id: "popular",
					val: "popular",
					name: '潮流'
				}, {
					id: "travel",
					val: "travel",
					name: '旅行'
				}, {
					id: "painting",
					val: "painting",
					name: '绘画'
				}, {
					id: "baby",
					val: "baby",
					name: '母婴'
				}, {
					id: "manual",
					val: "manual",
					name: '手工'
				}, {
					id: "DressUp",
					val: "DressUp",
					name: '化妆'
				}, {
					id: "Collection",
					val: "Collection",
					name: '收藏'
				}, {
					id: "technology",
					val: "technology",
					name: '技术'
				}, {
					id: "public",
					val: "public",
					name: '公益'
				}],
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '点击加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				flowPageIndex: 0,
				flowPageTotal: 0,
				cueFlowTotalList: [],
				flowList: [],
				isUpFlow: false,
				Livelist: [{
					id: this.$u.guid(),
					like: 784,
					cate: "recommend",
					author: '豆豆',
					title: '一言九鼎',
					image: '/static/Lives/live1.jpg'
				}, {
					id: this.$u.guid(),
					like: 75,
					cate: "recommend",
					title: '周末两日游',
					author: 'Lily',
					image: '/static/Lives/live2.jpg'
				}, {
					id: this.$u.guid(),
					like: 7891,
					cate: "recommend",
					title: '闺蜜一起的快乐时光',
					author: '快帮主',
					image: '/static/Lives/live3.jpg'
				}, {
					id: this.$u.guid(),
					like: 784,
					cate: "recommend",
					title: '夜色下的城市一角',
					author: '豆豆',
					image: '/static/Lives/live6.jpg'
				}, {
					id: this.$u.guid(),
					like: 75,
					cate: "recommend",
					title: '最新穿着搭配',
					author: 'Lily',
					image: '/static/Lives/live7.jpg'
				}, {
					id: this.$u.guid(),
					like: 7891,
					cate: "recommend",
					title: '别具一格的建筑',
					author: '快帮主',
					image: '/static/Lives/live8.jpg'
				}, {
					id: this.$u.guid(),
					like: 385,
					cate: "recommend",
					title: '穿着搭配',
					author: '川蜀鄂余',
					image: '/static/Lives/live9.jpg'
				}, {
					id: this.$u.guid(),
					like: 385,
					cate: "Vlog",
					title: '美好时光',
					author: '川蜀鄂余',
					image: '/static/Lives/live4.jpg'
				}, {
					id: this.$u.guid(),
					like: 35,
					cate: "Vlog",
					title: '服装搭配',
					author: '蜀味正道',
					image: '/static/Lives/live5.jpg'
				}, {
					id: this.$u.guid(),
					like: 2341,
					cate: "Vlog",
					author: 'Murphy',
					title: '个人游记',
					image: '/static/Lives/live1.jpg'
				}, {
					id: this.$u.guid(),
					like: 35,
					cate: "emotion",
					title: '积极面对每一天',
					author: '蜀味正道',
					image: '/static/Lives/live10.jpg'
				}, {
					id: this.$u.guid(),
					like: 2341,
					cate: "emotion",
					author: 'Murphy',
					title: '外出散心',
					image: '/static/Lives/live11.jpg'
				}]
			}
		},
		async onReady() {
			// #ifdef APP-PLUS
			var motionInfos = uni.getSystemInfoSync().statusBarHeight; //导航栏的高度
			this.maskTop = {
				"top": motionInfos * 2 + "rpx"
			};
			// #endif

			// #ifdef H5
			this.maskTop = {
				"top": "92rpx"
			};
			// #endif
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			// this.loadStatus = 'loading';
			// // 模拟数据加载
			// setTimeout(() => {
			// 	this.loadStatus = 'loadmore';
			// 	this.addRandomData();
			// }, 1000)

			if (this.flowPageIndex == this.flowPageTotal) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
				this.addRandomData();
			}
		},
		methods: {
			toDetail(_m) {
				var _tourl = '/pages/bbs/indexBBS/comments';
				uni.navigateTo({
					url: _tourl
				});
			},
			showFMask(_v) {
				this.showMask = _v == 1 ? true : false;
			},
			changeCate(index, curItem) {
				this.curCate = index;
				this.curCateVal = curItem.val;
				this.flowPageIndex = 0;
				this.flowPageTotal = 0;
				this.clear();
				this.addRandomData(true);
			},
			changeTab(index) {
				this.currentTab = index;
			},
			addRandomData(_isUpFlow) {
				// var dataLen = this.Livelist.length;
				// for (let i = 0; i < dataLen; i++) {
				// 	let index = this.$u.random(0, dataLen - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.Livelist[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }

				this.isUpFlow = _isUpFlow;
				var _pagesize = 5;
				var _cate = this.curCateVal;
				if (_cate == "") {
					_cate = "recommend";
				}
				// console.log("flowPageTotal:" + this.flowPageTotal);
				if (this.flowPageTotal == 0) {
					var _cueDataList = this.Livelist.filter(_curData => _curData.cate == _cate);
					this.cueFlowTotalList = _cueDataList;
					if (_cueDataList.length > 0) {
						this.pageData(_cueDataList, _pagesize);
					}
				}
				var curTotalList = this.cueFlowTotalList;
				if (!curTotalList || curTotalList.length == 0) {
					return;
				}

				let curIndex = this.flowPageIndex + 1;
				let _startIndex = curIndex * _pagesize - _pagesize;
				let _endIndex = curIndex * _pagesize;
				var curSliceDatas = curTotalList.slice(_startIndex, _endIndex);
				var dataLen = curSliceDatas.length;

				// console.log("this.flowPageIndex1:" + this.flowPageIndex);
				for (let i = 0; i < dataLen; i++) {
					let item = JSON.parse(JSON.stringify(curSliceDatas[i]));
					var hasData = this.flowList.filter(_item => _item.id == item.id);
					if (hasData.length == 0) {
						this.flowList.push(item);
						//console.log("flowList:" + JSON.stringify(item));
					}
				}


				this.flowPageIndex++;
				if (this.flowPageIndex == this.flowPageTotal) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			pageData(datas, pagesize) {
				let total = datas.length;
				if (!pagesize) pagesize = 10;
				if (total <= pagesize) {
					this.flowPageTotal = 1;
				} else {
					let rest = 0;
					this.flowPageTotal = parseInt(total / pagesize)
					rest = total % pagesize;
					if (rest > 0) {
						this.flowPageTotal += 1;
					}
				}
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: #fcfcfc;
	}
</style>

<style lang="scss" scoped>
	.tabs-wrap {
		width: 100%;
		text-align: center;
	}

	.demo-warter-left {
		border-radius: 4px;
		margin: 12rpx 0 0 14rpx;
		background-color: #ffffff;
		padding: 0 0 4px;
		position: relative;
	}

	.demo-warter-right {
		border-radius: 4px;
		margin: 12rpx 14rpx 0 14rpx;
		background-color: #ffffff;
		padding: 0 0 4px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		margin-top: 5px;
		padding: 0 10rpx;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
